<template>
  <div class="dayin">
    <el-button type="primary" @click="print()" class="dayin_btn"
      >打印预览</el-button
    >
    <!-- <el-popconfirm
      confirm-button-text="好的"
      cancel-button-text="不用了"
      icon-color="red"
      title="是否将此订单设置为待发货？"
      @confirm="set_DeliveryStatus"
    >
      <el-button  type="primary" slot="reference" style="margin-bottom: 10px;"> 打印预览</el-button>
    </el-popconfirm> -->

    <div ref="print" id="printArea">
      <h3 style="text-align: center">{{ Infomation }}</h3>
      <span style="display:block;text-align: center;margin-top:-10px;margin-bottom:10px;">{{formatterTime(bottoms.order_date)}}</span>
      <div class="div_span">
        <span>客户： {{bottoms.customer_name}}</span>
        <span>客户电话：  {{bottoms.contact_phone}}</span>
        <span style="width:400px">物流地址： {{bottoms.customer_address}}</span>
      </div>
      <table class="table_tb">
        <tr>
          <td style="width:10%;">型号</td>
          <td>颜色</td>
          <td>规格</td>
          <td>数量</td>
          <td>金额</td>
          <!-- <td>床帮</td>
          <td>床板</td>
          <td>床头</td> -->
          <td>柜子</td>
          <td>数量</td>
          <td style="width:250px">备注</td>
        </tr>
      </table>
      <div v-for="(item, index) in dayinlist" :key="index">
        <table class="table_tb table_tbs">
          <tr>
            <td>
              {{
                item.model_number
                  ? item.model_number.model_number
                  : ""
              }}
            </td>
            <td>
              {{ item.color ? item.color.color : "" }}
            </td>
            <td>
              {{
                item.specification
                  ? item.specification.specification
                  : ""
              }}
            </td>
            <td>
              {{ item.num }}
            </td>
            <td>
              {{ item.receivables }}
            </td>
            <!-- <td
              v-for="(ite, indexs2) in item.order_second"
              :key="indexs2" v-if="ite.models.modelname == '床帮'">
              <span v-if="ite.models.modelname == '床帮'">{{
                ite.product ? ite.product.product_name : ""
              }}</span>
              <span v-else></span>
            </td>
            <td
              v-for="(ite, indexs2) in item.order_second"
              :key="indexs2" v-if="ite.models.modelname == '床板'"
            >
              <span v-if="ite.models.modelname == '床板'">{{
                ite.product ? ite.product.product_name : ""
              }}</span>
              <span v-else></span>
            </td>
            <td
              v-for="(ite, indexs2) in item.order_second"
              :key="indexs2" v-if="ite.models.modelname == '床头'"
            >
              <span v-if="ite.models.modelname == '床头'">{{
                ite.product ? ite.product.product_name : ""
              }}</span>
              <span v-else></span>
            </td> -->
            <td
              v-for="(ite, indexs2) in item.order_second"
              :key="indexs2" v-if="ite.models.modelname == '床头柜'"
            >
              <span v-if="ite.models.modelname == '床头柜'">{{
                ite.product ? ite.product.product_name : ""
              }}</span>
              <span v-else></span>
            </td>
            <td
              v-for="(ite, indexs2) in item.order_second"
              :key="indexs2" v-if="ite.models.modelname == '床头柜'"
            >
              <span v-if="ite.models.modelname == '床头柜'">{{
                ite.total_num
              }}</span>
              <span v-else></span>
            </td>
           
            <td style="width:250px">
              {{ item.remark }}
            </td>
          </tr>
        </table>
      </div>
      <div class="list_order">
        <div class="left">
          <div class="lis">
            <el-row>
              <el-col :span="12"> 出货仓库 </el-col>
              <el-col :span="12">
                {{ bottoms.warehouse_name }}
              </el-col>
            </el-row>
          </div>
          <div class="lis">
            <el-row>
              <el-col :span="12"> 出货总件数 </el-col>
              <el-col :span="12">
                {{ bottoms.num }}
              </el-col>
            </el-row>
          </div>
          <div class="lis">
            <el-row>
              <el-col :span="12"> 业务员 </el-col>
              <el-col :span="12">
                {{ bottoms.company_name }}
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="right">
          <div class="lis">
            <el-row>
              <el-col :span="12"> 本单合计 </el-col>

              <el-col :span="12"> {{ bottoms.receivables }}</el-col>
            </el-row>
          </div>

        
          <div class="lis">
            <el-row>
              <el-col :span="12"> 此前欠款 </el-col>
              <el-col :span="12"> {{Number(bottoms.balance)}}</el-col>
            </el-row>
          </div>
          <div class="lis">
            <el-row>
              <el-col :span="12"> 应收 </el-col> 
              <el-col :span="12"> {{(Number(bottoms.balance)-Number(bottoms.receivables))>0?0:(Number(bottoms.balance)-Number(bottoms.receivables))}}</el-col>
            </el-row>
          </div>
         
          <div class="lis">
            <el-row>
              <el-col :span="12"> 收货人签字 </el-col>
              <el-col :span="12"> </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <div style="page-break-after: always"></div>
    </div>
  </div>
</template>


<script>
import { setDeliveryStatus } from "@/api/product/index";
export default {
  data() {
    return {
      dayinlist: [],
      strDate: "",
      bottoms: {
        warehouse_name: "",
        num: "",
        company_name: "",
        receivables: "",
        balance: "",
        qiankuan: "",
        contact_phone:'',
        customer_address:'',
        customer_name:'',
        order_date:''
      },
      Infomation: "",
    };
  },
  mounted() {
    this.dayinlist = JSON.parse(this.$route.query.data);
    this.Infomation = this.$store.getters.Infomation.company_name;
    this.currentTime();
    console.log(this.dayinlist);
    this.bottoms.balance = this.dayinlist[0].customer.balance;
    this.bottoms.contact_phone = this.dayinlist[0].customer.contact_phone;
    this.bottoms.customer_address = this.dayinlist[0].customer.customer_address;
    this.bottoms.customer_name = this.dayinlist[0].customer.customer_name;
    this.bottoms.order_date = this.dayinlist[0].order_date;
    this.dayinlist.forEach((item) => {
      // 发货库
      if (item.warehouse) {
        this.bottoms.warehouse_name = item.warehouse.warehouse_name;
      }
      // 业务员
      if (item.account_executive) {
        this.bottoms.company_name = item.account_executive.company_name;
      }
    

      // 总金额
      if (item.num != 0) {
        this.bottoms.receivables =
          Number(this.bottoms.receivables) + Number(item.receivables);
      }

      let arr=[]
      item.order_second.forEach(ite=>{
        arr.push(ite.models.modelname)
          // 总件数
          if (ite.num) {
            this.bottoms.num = Number(this.bottoms.num) + Number(ite.total_num);
          }
      })
      let chuangbang={
        models:{
          modelname:'床帮'
        },
        product:{
          product_name:''
        }
      }
      let chuangban={
        models:{
          modelname:'床板'
        },
        product:{
          product_name:''
        }
      }
      let chuangtou={
        models:{
          modelname:'床头'
        },
        product:{
          product_name:''
        }
      }

      let chuangtougui={
        models:{
          modelname:'床头柜'
        },
        product:{
          product_name:''
        }
      }
      if(!arr.includes('床帮')){
        item.order_second.push(chuangbang)
      }
      if(!arr.includes('床板')){
        item.order_second.push(chuangban)
      }
      if(!arr.includes('床头')){
        item.order_second.push(chuangtou)
      }
      if(!arr.includes('床头柜')){
        item.order_second.push(chuangtougui)
      }

    });
  },
  methods: {
    formatterTime(data) {
      return /\d{4}-\d{1,2}-\d{1,2}/g.exec(data).splice(0, 11)[0];
    },
    set_DeliveryStatus() {
      let ids_s = [];
      this.dayinlist.forEach((item) => {
        ids_s.push(item.id);
      });
      setDeliveryStatus({ ids: ids_s }).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "操作成功",
          });
          this.print();
        }
      });
    },
    /**
     * 获取当前时间
     */
    currentTime() {
      var date = new Date();
      var year = date.getFullYear(); //月份从0~11，所以加一
      let month = date.getMonth();
      console.log("month", month);
      var dateArr = [
        date.getMonth() + 1,
        date.getDate(),
        date.getHours(),
        date.getMinutes(),
        date.getSeconds(),
      ];
      //如果格式是MM则需要此步骤，如果是M格式则此循环注释掉
      for (var i = 0; i < dateArr.length; i++) {
        if (dateArr[i] >= 1 && dateArr[i] <= 9) {
          dateArr[i] = "0" + dateArr[i];
        }
      }
      this.strDate =
        year +
        "/" +
        dateArr[0] +
        "/" +
        dateArr[1] +
        " " +
        dateArr[2] +
        ":" +
        dateArr[3] +
        ":" +
        dateArr[4];
    },
    print() {
      this.$print(this.$refs.print);
    },
  },
};
</script>
<style scoped>
.dayin {
  padding: 25px;
  box-sizing: border-box;
}
/* 
长 75mm
宽 45mm */
#printArea {
  width: 1000px;
  margin: 0 auto;
}

#printArea > div:first-child {
  margin-top: 0px;
}
#printArea table {
  width: 100%;
  border-collapse: collapse;
}
#printArea table th {
  color: #333;
  padding: 5px 0;
  font-size: 26px;
}
#printArea table {
  border: 1px solid #c5c5c5;
}
#printArea table td,
table th {
  border: 1px solid #c5c5c5;
  text-align: center;
  padding: 0;
  margin: 0;
}

#printArea table tr td {
  min-height: 35px;
  line-height: 35px;
}
/* #printArea table thead th {
  background-color: #0a8fa1;
} */

#printArea table tr th,
table tr td {
  padding: 5px 12px;
}
.procedure {
  word-wrap: break-word;
}

.dayin_btn {
  background: #0a8fa1;
  border: none;
  margin: 20px 0;
}

.list_order {
  display: flex;
  justify-content: space-between;
}
.list_order .left {
  width: 300px;
}
.list_order .right {
  width: 300px;
}
.list_order .left .lis {
  margin-top: 15px;
}
.list_order .right {
  margin-right:100px;
}
.list_order .right .lis {
  margin-top: 15px;
}

.div_span {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr ;
  margin-bottom:5px;
}
.div_span  span{
 display:block; 
}
.table_tb tr {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  /* display: flex;
  justify-content: space-between; */
}
.table_tb tr td {
  font-size: 14px;
  display: block;
  height: auto;
  word-break: break-all;
}

.table_tbs {
  border-top: none !important;
}
@media print {
  #printArea {
  width: 1000px;
  margin: 0 auto;
}

#printArea > div:first-child {
  margin-top: 0px;
}
#printArea table {
  width: 100%;
  border-collapse: collapse;
}
#printArea table th {
  color: #333;
  padding: 5px 0;
  font-size: 26px;
}
#printArea table {
  border: 1px solid #c5c5c5;
}
#printArea table td,
table th {
  border: 1px solid #c5c5c5;
  text-align: center;
  padding: 0;
  margin: 0;
}

#printArea table tr td {
  min-height: 35px;
  line-height: 35px;
}
/* #printArea table thead th {
  background-color: #0a8fa1;
} */

#printArea table tr th,
table tr td {
  padding: 5px 12px;
}
.procedure {
  word-wrap: break-word;
}

.dayin_btn {
  background: #0a8fa1;
  border: none;
  margin: 20px 0;
}

.list_order {
  display: flex;
  justify-content: space-between;
}
.list_order .left {
  width: 300px;
}
.list_order .right {
  width: 300px;
}
.list_order .left .lis {
  margin-top: 15px;
}
.list_order .right {
  margin-right:100px;
}
.list_order .right .lis {
  margin-top: 15px;
}

.div_span {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr ;
  margin-bottom:5px;
}
.div_span  span{
 display:block; 
}
.table_tb tr {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  /* display: flex;
  justify-content: space-between; */
}
.table_tb tr td {
  font-size: 14px;
  display: block;
  height: auto;
  word-break: break-all;
}

.table_tbs {
  border-top: none !important;
}
}
</style>
